<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
    <head>
        <base href="<%=basePath%>">
        <title>欢迎</title>
        <link rel="stylesheet" href="static/themes/bootstrap/easyui.css">
        <link rel="stylesheet" href="static/css/base.css">
        <script src="static/javascript/jquery-1.11.3.min.js"></script>
        <script src="static/javascript/jquery.easyui.min.js"></script>
        <script src="static/javascript/utils.js"></script>
        <script src="static/javascript/base.js"></script>

        <link rel="stylesheet" href="plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="plugins/bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
        <script src="plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" language="JavaScript">
            $(document).ready(function(){
                $("#forwardCreateArticle").click(function () {
                    $("#main").load('views/createArticle.jsp');
                });
                $(".articleList .showArticle").click(function () {
                    obj=$.ajax({url:"article/show?articleId=" + $(this).attr("name"),async:false});
                    $("#main").html(obj.responseText);
                });
                $("#search").click(function () {
                    var text = $("#searchInput").val();
                    if("" == ($.trim(text))) {
                        alert("搜索内容不可以为空");
                    } else {
                        obj=$.ajax({url:"article/search?text=" + encodeURI(encodeURI(text)), async:false});
                        $("#main").html(obj.responseText);
                    }
                });

                $(".articleList .tag").each(function (){
                    if ($(this).text().indexOf("篮球") != -1){
                        $(this).css("color","blue");
                    } else if ($(this).text().indexOf("红球") != -1) {
                        $(this).css("color","red");
                    }
                });

                $("#top30").click(function () {
                    obj=$.ajax({url:"page/articles?maxArticleSize=30",async:false});
                    $("#main").html(obj.responseText);
                    $("#topSizePanel button").css("background-color","lightgrey");
                    $("#top30").css("background-color","skyblue");
                });
                $("#top50").click(function () {
                    obj=$.ajax({url:"page/articles?maxArticleSize=50",async:false});
                    $("#main").html(obj.responseText);
                    $("#topSizePanel button").css("background-color","lightgrey");
                    $("#top50").css("background-color","skyblue");
                });
                $("#top100").click(function () {
                    obj=$.ajax({url:"page/articles?maxArticleSize=100",async:false});
                    $("#main").html(obj.responseText);
                    $("#topSizePanel button").css("background-color","lightgrey");
                    $("#top100").css("background-color","skyblue");
                });

            });
        </script>
    </head>
    <body>
        <div>
            <div class="articleHead">
                <c:choose>
                    <c:when test="${sessionScope.containsKey('userName')}">
                        <button id="forwardCreateArticle">发表文章</button>
                    </c:when>
                </c:choose>
                <input id="searchInput" name="searchInput" class="searchInput" type="text" placeholder="搜索标题..." value="${searchInput}"/>&nbsp;
                <button id="search">搜索</button>
            </div>
            <div class="articleList">
                <table>
                    <col span="2" width="5%"/>
                    <col span="1" width="60%"/>
                    <col span="3" width="10%"/>
                    <tr>
                        <th></th>
                        <th>标签</th>
                        <th>主题</th>
                        <th>回复/查看</th>
                        <th>作者</th>
                        <th>时间</th>
                    </tr>
                    <c:forEach items="${articles}" var="article" varStatus="vs">
                        <tr>
                            <td>
                                <c:if test="${article.isTop == 1}"><img src="static/images/top.gif"></c:if>
                                <c:if test="${article.isTop == 0}"><img src="static/images/common.gif"></c:if>
                            </td>
                            <td>
                                <span class="tag">[${article.tag}]</span>
                            </td>
                            <td>
                                <a class="showArticle" name="${article.id}"><c:out value="${article.title}"/></a>
                            </td>
                            <td>${article.commnetTimes}/${article.watchTimes}</td>
                            <td>
                                <c:out value="${article.userName}"/>
                            </td>
                            <td>
                                <spring:eval expression="article.submitTime"></spring:eval>
                            </td>
                        </tr>
                    </c:forEach>
                </table>
                <div id="topSizePanel" align="right">
                    <button id="top30">&lt;30</button>
                    <button id="top50">&lt;50</button>
                    <button id="top100">&lt;100</button>
                </div>
            </div>

        </div>
    </body>
</html>